import { FileOutlined } from '@ant-design/icons';
import { Input, Popover, Divider } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.scss';
import { DirTreeType } from '../../client/file';

interface IFill extends DirTreeType {
  onCreateDir: () => void;
  onCreateFile: () => void;
}

const File: React.FC<IFill> = (props) => {
  const [name, setName] = useState<string>('');
  const [visible, setVisible] = useState(false);
  const [edit, setEdit] = useState(false);

  useEffect(() => {
    setName(props.name);
  }, [props.name]);

  const onChange = (e: any) => {
    const name = e.target?.value?.trim();
    setName(name);
  };

  const onBlur = (e: any) => {
    const name = e.target?.value?.trim();
    setName(name);
  };

  const onContextMenu = () => {
    setVisible(true);
  };
  const createDir = () => {
    props.onCreateDir && props.onCreateDir();
  };
  const createFile = () => {
    props.onCreateFile && props.onCreateFile();
  };
  const renameFile = () => {
    props.onCreateFile && props.onCreateFile();
  };
  const deleteFile = () => {
    props.onCreateFile && props.onCreateFile();
  };
  const content = () => {
    return (
      <div>
        <div onClick={createDir}>新建文件夹</div>
        <Divider style={{ margin: '5px' }} />
        <div onClick={createFile}>新建文件</div>
        <Divider style={{ margin: '5px' }} />
        <div onClick={renameFile}>重命名</div>
        <Divider style={{ margin: '5px' }} />
        <div onClick={deleteFile}>删除</div>
      </div>
    );
  };

  return (
    <div className={styles.directoryContainer}>
      <Popover content={content} visible={visible}>
        <div className={styles.directory} onContextMenu={onContextMenu}>
          <div className="left-icon">
            <FileOutlined />
          </div>
          <div className={styles.folderTitle}>
            {' '}
            {!edit ? (
              name
            ) : (
              <Input value={name} onBlur={onBlur} onChange={onChange}></Input>
            )}
          </div>
        </div>
      </Popover>
    </div>
  );
};
export default File;
